#Reflow, Repaint

웹 페이지가 렌더링되어 attachment 되었으면 성공적으로 페이지를 그리게 됩니다.

그 후에 액션이나, 이벤트에 따라서 html 요소들이 변경이 되는 과정들과 그에 따른 성능 최적화에 대해서 알아보겠습니다.

#Reflow ( Layout )

#어떤 과정으로 발생하는 지

• 어떠한 액션이나 이벤트에 따라서 html 요소의 크기나 위치 등 레이아웃 수치를 수정하게 되면 그에 영향을 받는 자식 노드나 부모노드를 포함하여 Layout 과정을 다시 수행하게 됩니다.
• 이러한 동작이 일어나면 Render Tree 에 있는 요소들의 크기와 위치를 다시 계산하게 되는데 이 과정을 Reflow 라고 합니다

#Reflow 가 일어나는 경우

• 페이지 초기 렌더링 시 ( 최초 Layout 과정 )
• 윈도우 resize event 발생시 ( Viewport 크기 변경시 )
• 노드의 추가 또는 제거
• 요소의 위치, 크기 변경 ( left, top, margin, padding, border, width, height 등… )
• 텍스트의 변경과 이미지 소스의 변경 등

#Repaint ( Paint )

위 과정의 Reflow는 Render Tree까지 영향을 주는 과정이고, 결국 Render Tree 를 화면에 그리는 작업이 일어나게 됩니다.

이 과정을 Repaint 라고 합니다

• Reflow 가 일어나면 Repaint는 필연적으로 일어나게 됩니다.

• 하지만 Reflow 가 일어나야지만 Repaint 가 일어나는 것은 아닙니다.

  • 사이즈나 content 변경이 없으면 Reflow 가 일어나지 않기 때문에
  • background-color 나 visibility 와 같은 레이아웃에 영향을 주지 않는 스타일 속성의 변화시에는 Reflow 가 일어나지 않고 Repaint 만 발생하게 됩니다.

#Reflow, Repaint 다양한 경우

• Reflow 가 일어나는 대표적인 속성

position	width	height	left	top
right	bottom	margin	padding	border
border-width	clear	display	float	font-family
font-size	font-weight	line-height	min-height	overflow
text-align	vertical-align	white-space	...

• Repaint 가 일어나는 대표적인 속성

background	background-image	background-position	background-repeat	background-size
border-radius	border-style	box-shadow	color	line-style
outline	outline-color	outline-style	outline-width	text=decoration
visibility	...

• Reflow, Repaint 가 일어나지 않는 속성

  • transform 이나 opacity 같은 속성은 Reflow, Repaint 가 일어나지 않습니다

  • 상황에 따라서 left,right,width, height 보단 transform,

    visibility / display 보다 opacity 를 사용하는것이 성능 개선에 도움이 됩니다.

#Reflow, Repaint 을 통한 성능 최적화

1. visibilty: hidden 보다 display:none 을 사용합니다
   • visibility 는 Render tree 에 계산되기 때문에 하위노드 전체까지 Reflow가 발생하게 되지만 display:none 은 Render tree에서 제외됩니다.
2. 위의 도표를 참조하여 Reflow가 발생하는 속성보다 Repaint 만 발생하는 속성을 사용합니다.
3. position : absolute 나 fixed 를 사용하여 영향을 받는 주변 노드들을 줄일 수 있습니다.
4. 프레임 줄이기
   • animation 이나 JS 로 동작하는 변화부분에서 debounce나 throttle 을 사용하여 연산을 줄일수 있고, 동작의 부드러운 효과를 줄이고 성능을 개선할 수 있습니다.
5. documentFragment
   • documentFragment 는 실제 Dom, Render Tree 에 포함되지 않는 노드입니다.
   • Render Tree에 반복적인 appendChild를 하게 된다면, 그 반복만큼 Reflow, Repaint 가 발생하게 됩니다.
   • documentFragment에 노드를 추가하는 작업은 reflow, repaint 가 발생하지 않습니다
   • documentFragment 를 Render Tree에 삽입하게 된다면 Reflow와 Repaint 를 단1회로 할 수 있습니다.